<template>
  <div>查看会员信息</div>
  <!-- 表格 -->
  <div class="top">
    <p>搜索:</p>
    <el-input v-model="val" placeholder="请输入手机号或者卡号" class="tel_input" @keydown.enter="handleSouSuo(val)" />
    <el-button size="small" @click="handleSouSuo(val)">确定</el-button>
  </div>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="480" stripe>
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="id" label="序号" min-width="80" align="center" />
    <el-table-column prop="tips" label="会员类型" min-width="140" align="center"> </el-table-column>
    <el-table-column prop="tel" label="联系方式" min-width="180" align="center" />
    <el-table-column prop="password" label="密码" min-width="100" align="center" />
    <el-table-column prop="idCard" label="卡号" min-width="120" align="center" />
    <el-table-column prop="fanshi" label="充值方式" min-width="120" align="center" />
    <el-table-column prop="taocan" label="充值套餐" min-width="120" align="center" />
    <el-table-column prop="zidingyi" label="自定义充值" min-width="120" align="center" />
    <el-table-column label="操作" min-width="220" align="center">
      <template #default="scope">
        <el-button size="small" style="color: #c7a215" color="#c7a3152c" @click="edit(scope.row)">编辑</el-button>
        <el-button size="small" @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="ye">
    <el-button type="primary" @click="handle1">首页</el-button>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="handleChange" :default-current-page="1" />
    <el-button type="primary" @click="handle2">尾页</el-button>
  </div>
  <!--弹出框  -->
  <el-dialog title="编辑会员信息" v-model="open">
    <el-form :model="form" label-position="right" label-width="100px">
      <div class="vip_info">会员信息:</div>
      <el-form-item label="会员类型:" prop="tips" :required="true">
        <el-select v-model="form.tips" placeholder="请选择">
          <el-option label="白银会员" value="白银会员" />
          <el-option label="黄金会员" value="黄金会员" />
          <el-option label="铂金会员" value="铂金会员" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式:" prop="tel">
        <el-input v-model="form.tel" placeholder="请输入号码" class="tel_input" />
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" class="tel_input" />
      </el-form-item>
      <el-form-item label="卡号:" prop="idCard">
        <el-input v-model="form.idCard" placeholder="手机号后四位为卡号" class="tel_input" />
      </el-form-item>
      <div class="vip_info">充值:</div>
      <el-form-item label="充值方式:" prop="fanshi">
        <el-radio-group v-model="form.fanshi" text-color="#fff" fill="#ffae00">
          <el-radio-button label="微信" class="radio_btn" />
          <el-radio-button label="银行卡" class="radio_btn" />
          <el-radio-button label="支付宝" class="radio_btn" />
          <el-radio-button label="现金" class="radio_btn" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="充值套餐:" prop="tel">
        <el-radio-group v-model="form.taocan" text-color="#fff" fill="#ffae00">
          <el-radio-button label="充1000送200" class="radio_btn" />
          <el-radio-button label="充2000送500" class="radio_btn" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自定义充值:" prop="tel">
        <el-input v-model="form.zidingyi" placeholder="请输入充值金额" class="tel_input" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { vipApi, delVipApi, editApi } from '@/api/api.js'
import '@/mock/vipInfo.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'

//#region
const store = useStore()
//搜索
const val = ref('')
//定义
const tableData = ref([])
const total = ref(0)
let count = ref(1)

// 设置当前页数为1
const currentPage = ref(1)

//获取数据和搜索
const getData = async () => {
  const res = await vipApi({ currentPage: currentPage.value, pageSize: 10, val: val.value })
  //赋值数据
  tableData.value = res.data.result
  //总数
  total.value = res.data.total

  // console.log(res.data.result.length)
  // store.state.id = res.data.result.length + 1
  // store.commit('changeId', res.data.result.length)
}
//页面切换
const handleChange = (num) => {
  currentPage.value = num
  localStorage.setItem('currentPage', currentPage.value)
  count = currentPage.value

  console.log(count)
}

//监听页码的变化
watch(currentPage, () => {
  getData()
  count = currentPage.value
})

onMounted(() => {
  if (localStorage.getItem('currentPage')) {
    // console.log(localStorage.getItem('currentPage'))
    currentPage.value = localStorage.getItem('currentPage')
    count = currentPage.value
  }
  getData()
})

//首页
//bug:点击1不高亮,点击上一页bug
const handle1 = () => {
  handleChange(1)
  // currentPage.value = 1
}
//尾页
//bug:尾页508条
const handle2 = () => {
  handleChange(total.value / 10)
}

//删除
const remove = (id) => {
  ElMessageBox.confirm('确认删除吗', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      delVipApi({ id: id }).then((res) => {
        console.log(res)
        ElMessage({
          message: res.data.msg,
          type: 'success',
        })
        getData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//搜索
const handleSouSuo = async () => {
  getData()
}
//#endregion
//编辑
//done:------------------------------------------------
const open = ref(false)
const form = reactive({
  tips: '',
  tel: '',
  password: '',
  idCard: '',
  fanshi: '',
  taocan: '',
  zidingyi: '',
})
// let editObj = null
const edit = (row) => {
  open.value = true
  Object.assign(form, row)
}

//确定编辑
const sure = async () => {
  // console.log(form)
  const res = await editApi({ state: form })
  // console.log(editObj)
  open.value = false
  getData()
}
</script>

<style lang="less" scoped>
div {
  font-size: 16px;
  // font-weight: 700;

  margin-bottom: 20px;
}

.top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tel_input {
  width: 200px;
  // padding-top: 10px;
  margin: 0 10px;
  --el-input-focus-border-color: #ffae00;
}
.el-pagination {
  justify-content: flex-end;
}
.ye {
  display: flex;
  justify-content: flex-end;
}
.el-form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}
</style>
